<script setup>
import { ref } from 'vue'
import { getRefinedPlayListAPi } from '@/apis/song.js'
import SongListCard from '@/components/SongListCard/SongListCard.vue'
import bus from '@/utils/bus'

const porps = defineProps({
  tag: {
    type: String
  }
})

// 是否关闭触底加载
const isLoad = ref(false)
// 请求参数
const before = ref('')
// 精品歌单列表
const refinedPlayList = ref([])

// 获取精品歌单列表
const getRefinedPlayList = async () => {
  bus.emit('changeIsLoading', true)
  const { data } = await getRefinedPlayListAPi(porps.tag, 42, before.value)
  before.value = data.lasttime
  refinedPlayList.value.push(...data.playlists)
  bus.emit('changeIsLoading', false)
  if (!data.more) {
    isLoad.value = true
  }
}
</script>

<template>
  <div class="recomment-list" :infinite-scroll-disabled="isLoad" v-infinite-scroll="getRefinedPlayList"
    :infinite-scroll-delay="500" :infinite-scroll-distance="300">
    <template v-for="item in refinedPlayList" :key="item.id">
      <Router-link :to="`/playList/${item.id}`">
        <SongListCard :song="item" />
      </Router-link>
    </template>
    <div class="bottom" v-if="isLoad">
      —————————— 到底线了 ——————————
    </div>
  </div>
</template>

<style scoped lang='scss'>
.recomment-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-start;

  div {
    margin: 25px 7px;
  }

  .bottom {
    width: 1165px;
    line-height: 70px;
    text-align: center;
    color: #aaa;
  }
}
</style>
